<template>
    <!-- 搜索栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <!-- model 绑定表单数据 -->
            <el-form :inline="true" :model="queryDept" class="demo-form-inline">
                <el-form-item label="部门名称">
                    <el-input v-model="queryDept.deptName" placeholder="部门名称"/>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select
                        style="width: 100px"
                        v-model="queryDept.deptStatus"
                        placeholder="选择状态"
                    >
                        <el-option value="0" :selected="true" label="全部"/>
                        <el-option value="1" label="正常"/>
                        <el-option value="2" label="废弃"/>
                    </el-select>
                </el-form-item>
               
                <el-form-item>
                    <el-button type="primary" @click="loadDept">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <!-- 搜索栏部分结束 -->
  <!-- 工具栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="新增部门"
                    placement="top-start"
            >
                <el-button @click="toAddDept" type="primary">
                    <el-icon>
                        <Plus/>
                    </el-icon>
                </el-button>
            </el-tooltip>
            <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
                <el-icon>
                    <EditPen/>
                </el-icon>
            </el-button>

        </el-col>
    </el-row>
  <!-- 工具栏部分结束 -->
  <!-- 列表部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-table ref="menuTable"
                      lazy
                      :load="loadDepts"
                      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                      row-key="deptId"
                      :data="depts" border :stripe="true"
                      style="width: 95%">
                <el-table-column prop="deptId" label="#"/>
                <el-table-column prop="deptName" label="部门名称"/>
                <el-table-column prop="deptManager" label="负责人"/>
                <el-table-column prop="deptTel" label="电话"/>
                <el-table-column prop="deptEmail" label="邮箱"/>
                <el-table-column prop="deptOrder" label="排序"/>
                <el-table-column prop="deptStatus" label="状态">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.deptStatus == 1">正常</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.deptStatus == 2">废弃</el-tag>
                    </template>
                </el-table-column>
                <!-- 行工具栏 -->
                <el-table-column width="200" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="toAddDept(scope.row.deptId)" size="small">添加</el-button>
                        <el-button type="primary" @click="toEditDept(scope.row.deptId)" size="small">编辑</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                       @confirm="deleteDept(scope.row.deptId)" title="您确定要删除这个部门信息吗？">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!-- 列表部分结束 -->


  <!-- 使用子组件 -->
</template>

<script>
// import QdIcon from '../../../components/qd-icom.vue';
// 引入api
import DeptRequest from "../../../api/dept.js";

export default {
    components: {
        // QdIcon
    },
    name: "dept.vue",
    data() {
        return {
            queryDept:{parentId:0},// 查询条件
            depts:[],// 所有菜单列表

            editBtnDisabled:true,// 编辑按钮是否禁用
        }
    }, methods: {

        /**
         * 加载所有菜单
         * @param row 点击的哪一行数据
         * @param node 点击的那一行节点对象
         * @param resolve 回调函数  这个函数可以将我们加载的数据绑定到对应的位置
         */
        loadDepts(row,node,resolve){
            //  设置父节点的id
            if(row == undefined){
                // 查询第一级部门
                this.queryDept.parentId = 0;// 设置父节点编号为0
                DeptRequest.loadDept(this.queryDept,res=>{
                    this.depts = res.data;
                });
            }else{
                // 设置父级部门为当前行的部门编号
                this.queryDept.parentId = row.deptId;
                DeptRequest.loadDept(this.queryDept,res=>{
                    // 查询到的数据使用resolve函数进行处理
                    resolve(res.data);
                });
            }

        },
        /**
         * 工具栏编辑按钮事件
         */
        editBtnHandler(){

        },
        /**
         * 表格中数据选择事件
         */
        handleSelectionChange(){

        },
        /**
         * 行新增按钮事件
         * @param deptId
         */
        toAddDept(deptId){

        },
        /**
         * 行编辑按钮事件
         * @param deptId
         */
        toEditDept(deptId){

        },
        /**
         * 行删除按钮事件
         * @param deptId
         */
        deleteDept(deptId){

        },
    }, mounted() {
        this.loadDepts();
    }
}
</script>

<style scoped>

</style>